<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="userName+='!'">{{userName}}</button>
        <button @click="isShow=!isShow">isShow取反</button>
        <One v-if="isShow" :user-name="userName"></One>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            userName:"zhangsan",
            isShow:true
        },
        components:{
            // 父组件更新如果影响到子组件视图的话，子组件会执行更新阶段的钩子。
            One:{
                props:["user-name"],
                template:(`
                    <h3>one:{{userName}}</h3>
                `),
                beforeCreate(){
                    console.log("4-One->beforeCreate")
                },
                created(){
                    console.log("5-One->created");
                },
                beforeMount(){
                    console.log("6-One->beforeMount");
                },
                mounted(){
                    console.log("7-One->mounted");
                },
                beforeUpdate(){
                    console.log("one->beforeUpdate")
                },
                updated(){
                    console.log("one->updated")
                },
                beforeDestroy() {
                    console.log("one->beforeDestroy")
                },
                destroyed(){
                    console.log("one->destroyed")
                }
            }
        },
        beforeCreate(){
            console.log("1-beforeCreate")
        },
        created(){
            console.log("2-created");
        },
        beforeMount(){
            console.log("3-beforeMount");
        },
        mounted(){
            console.log("8-mounted");
        }
    })
</script>
</html>